<template>
	<z-paging
		ref="paging"
		v-model="dataList"
		@query="queryList"
		bgColor="#fff"
		:loading-more-enabled="false"
		:refresher-enabled="false"
		:empty-view-style="{ 'margin-top': '-300rpx' }"
		:auto="false"
	>
		<template #top>
			<uv-navbar placeholder title="商城" leftIcon=" " :autoBack="true"></uv-navbar>
		</template>
		<template #left>
			<view class="right">
				<block v-for="(item, index) in dataList" :key="item.id">
					<view class="item flex-cen-ali font-28 font-weight-middle" @click="tabsClick(index)" :class="{ cur: index == cur }">
						{{ item.name }}
					</view>
				</block>
			</view>
		</template>
		<view class="p-x-28 p-b-100" style="overflow-y: auto" v-if="dataList.length">
			<view class="position-relative" @click.stop="getProduct(dataList[cur], dataList[cur], 0)">
				<u-image :src="dataList[cur].thumb" width="480rpx" height="460rpx" radius="12rpx" bgColor="transparent"></u-image>
				<view class="position-absolute" style="bottom: 38rpx; left: 36rpx">
					<view class="font-32 font-weight-middle m-b-12">
						{{ dataList[cur].name }}
					</view>
					<u-icon name="arrow-right" size="22rpx" color="#1E1E1E" label="查看全部" label-size="24rpx" labelPos="left" labelColor="#1E1E1E"></u-icon>
				</view>
			</view>
			<block v-for="(item, index) in dataList[cur].children" :key="index">
				<view class="box p-x-28 flex-ali-bet m-t-28" @click.stop="getProduct(dataList[cur], item, index + 1)">
					<view class="font-28 font-weight-middle">
						{{ item.name }}
					</view>
					<u-image :src="item.thumb" width="186rpx" height="124rpx" mode="aspectFill" bgColor="transparent"></u-image>
				</view>
			</block>
		</view>
		<template #bottom>
			<dy-login ref="login"></dy-login>
			<tabbar class="tabbars tab" :number="1" ref="tabbarRef" @change="change"></tabbar>
		</template>
	</z-paging>
</template>

<script setup>
import { getCategory } from '@/api/api';
import { ref, onMounted, reactive, getCurrentInstance } from 'vue';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
import { onReachBottom, onShow, onReady, onLoad, onTabItemTap } from '@dcloudio/uni-app';
import { useCounter } from '../../mixins/userHooks';
const { tool } = useCounter();
const { ctx } = getCurrentInstance();
const paging = ref(null);
const dataList = ref([]);
const cur = ref(0);
const tabsClick = (e) => {
	console.log(dataList.value, e);
	cur.value = e;
};

const queryList = async (pageNumber, pageSize) => {
	tool.loading();
	let { code, data, msg } = await getCategory();
	if (code != 1) return tool.alert(msg);
	paging.value.complete(data || []);
	tool.loading_h();
};
const getProduct = (item, item2, index) => {
	route({
		url: 'pagesA/pages/productList/productList',
		params: {
			id: item2.id,
			inx: index,
			children: encodeURIComponent(
				JSON.stringify([
					{
						name: '全部',
						id: item.id
					},
					...(dataList.value[cur.value]?.children || [])
				])
			)
		}
	});
};
onShow(() => {
	// dataList.value = [];
	// cur.value = 0;
	setTimeout(() => {
	  paging.value.reload();
	}, 100);
});
// //底部tabbar 
// const change = (e) => {
// 	console.log(e, '-----========');
// };
</script>

<style lang="scss" scoped>
// ::v-deep .uv-vtabs__bar {
//   height: auto !important;
// }

.right {
	width: 215rpx;
	height: 100%;
	background: #f8f8f8;

	.item {
		width: 215rpx;
		height: 118rpx;
		color: #66686c;
	}

	.cur {
		background: #faeced;
		position: relative;
		color: #840202;

		&::after {
			content: ' ';
			width: 8rpx;
			height: 48rpx;
			background: #840202;
			position: absolute;
			left: 0%;
			top: 50%;
			transform: translateY(-50%);
			flex-shrink: 0;
		}
	}
}

.box {
	width: 480rpx;
	height: 160rpx;
	flex-shrink: 0;
	border-radius: 12rpx;
	background: #f8f8f8;
}
</style>
